<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- 控制浏览器缓存 -->
    <meta http-equiv="Cache-Control" content="no-store" />
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符" />
    <!-- 页面关键词 -->
    <meta name="keywords" content="" />
    <title>付款</title>
    <link href="../../../assets/wap/css/index.css" rel="stylesheet" />
    <script src="../../../assets/wap/js/jquery-3.1.1.min.js"></script>
    <script src="../../../assets/wap/layer_mobile/layer.js"></script>
    <style>
        .clearfix{
            position: relative;
        }
    </style>
</head>
<body>
<div class="wrap">
    <form action="{:url('Pay/submit')}" method="post" class="edit_cash">
        <p>消费总额</p>
        <div class="shuru">
            <span>&yen;</span>
            <div id="div"></div>
            <input type="hidden" id="customMoney" name="customMoney" value="0">
            <input type="hidden" id="wxapp_id" name="wxapp_id" value="10001">
        </div>
        <p class="shifu">
            <span>获赠积分</span>
            <span id="jifen" style="color: #ff0000;">0积分</span>
        </p>
        <p style="padding-top: 3%;">可询问工作人员应缴费用总额</p>
        <p style="padding-top: 3%;color: red;">每月8号、18号、28号为会员日，会员日双倍积分！</p>
        <input type="button" value="支付" id="pay" onclick="zhifu()" class="submit" />
    </form>
</div>
<div class="layer-content">
    <div class="form_edit clearfix">
        <div class="num">1</div>
        <div class="num">2</div>
        <div class="num">3</div>
        <div class="num">4</div>
        <div class="num">5</div>
        <div class="num">6</div>
        <div class="num">7</div>
        <div class="num">8</div>
        <div class="num">9</div>
        <div class="num">.</div>
        <div class="num">0</div>
        <div id="qingkong">清空</div>
        <div style="position: absolute;right: 0;width: 22.5%;">
            <div id="remove" style="width: 100%;background-color: #fff;height: 45px;border-radius: 5px;line-height: 45px;padding-top: 10%;">
                <img style="width: 40%;" src="../../../assets/wap/images/delete.png">
            </div>
            <div onclick="zhifu()" style="background: red;color: #fff;height: 140px;margin-top: 4%;border-radius: 5px;line-height: 140px;">
                支付
            </div>
        </div>
    </div>
</div>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js "></script>
<script>
    function zhifu() {
        if($('#customMoney').val() == ''){
            layer.open({
                content: '请输入付款金额！'
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            return false;
        }
        $.ajax({
            type: 'post',
            dataType: 'json',
            data: {customMoney: $('#customMoney').val(), wxapp_id: 10001},
            url: "/index.php?s=/wap/Userpay/submit",
            success: function (data) {
                if (data.status == 200) {
                    wx.chooseWXPay({
                        timestamp: data.payment.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                        nonceStr: data.payment.nonceStr, // 支付签名随机串，不长于 32 位
                        package: 'prepay_id=' + data.payment.prepay_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                        signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                        paySign: data.payment.paySign, // 支付签名
                        success: function (res) {
                            // 支付成功后的回调函数
                            layer.open({
                                content: '支付成功'
                                ,btn: ['确定']
                                ,yes: function(index){
                                    window.location.href='/Wap/Userpay/orderInfo.html?orderid='+data.order_id;
                                }
                            });
                        }
                    });
                }
            }
        })
    }
    $(function(){
        $.ajax({
            type : "POST",
            url:"/index.php?s=/wap/Userpay/ajaxGetWxConfig",
            data:{'askUrl':encodeURIComponent(location.href.split('#')[0])},
            dataType:'JSON',
            success: function(res)
            {
                //微信配置
                wx.config({
                    debug: false,
                    appId: res.appId,
                    timestamp: res.timestamp,
                    nonceStr: res.nonceStr,
                    signature: res.signature,
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage','onMenuShareQQ','onMenuShareQZone','hideOptionMenu','chooseImage','uploadImage','downloadImage','startRecord','stopRecord','onVoiceRecordEnd','playVoice','pauseVoice','stopVoice','onVoicePlayEnd','downloadVoice','uploadVoice'] // 功能列表，我们要使用JS-SDK的什么功能
                });
            },
            error:function(res){
                console.log("wx.config error:");
                console.log(res);
                return false;
            }
        });

        //填写信息
        $('.infor-sub').click(function(e){
            $('.layer').hide();
            $('.form').hide();
            e.preventDefault();		//阻止表单提交
        })
        // 监听#div内容变化，改变支付按钮的颜色
        $('#div').bind('DOMNodeInserted', function(){
            if($("#div").text()!="" || $("#div").text()>'0'){
                $('.submit').removeClass('active');
                $('.submit').attr('disabled', false);
            }else{
                $('.submit').addClass('active');
                $('.submit').attr('disabled', true);
            }
        })
        $('#div').trigger('DOMNodeInserted');

        $('.shuru').click(function(e){
            $('.layer-content').animate({
                bottom: 0
            }, 200)
            e.stopPropagation();
        })
        $('.wrap').click(function(){
            $('.layer-content').animate({
                bottom: '-200px'
            }, 200)
        })

        $('.form_edit .num').click(function(){
            var oDiv = document.getElementById("div");
            oDiv.innerHTML += this.innerHTML;
            console.log(oDiv.innerHTML)
            $('#customMoney').val(oDiv.innerHTML);
            poinsJiSuan(oDiv.innerHTML)
        })
        $('#qingkong').click(function(){
            $('#div').html('');
            $('#customMoney').val('');
        })
        $('#remove').click(function(){
            var oDiv = document.getElementById("div");
            var oDivHtml = oDiv.innerHTML;
            oDiv.innerHTML = oDivHtml.substring(0,oDivHtml.length-1);
            $('#customMoney').val(oDiv.innerHTML);
            poinsJiSuan(oDiv.innerHTML)
        })
        function poinsJiSuan(money) {
            $.ajax({
                type:'post',
                dataType:'json',
                data: {money:money,wxapp_id:10001},
                url:"/index.php?s=/api/pay/integraljisuan",
                success:function (data) {
                    $('#jifen').html(data.data.integral+'积分')
                }
            })
        }
    })
</script>
</body>
</html>
